<template>
  <div class="Goods">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <van-pull-refresh v-model="MainLoading" @refresh="onRefresh">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in DetailData.banner" :key="index">
          <img :src="item" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- Title标题 -->
      <div class="GoodsHeader">
        <van-panel class="HeaderBox" :title="DetailData.name"  :status="('￥'+DetailData.price)"></van-panel>
        <div class="container">
          <!-- 作者介绍 -->
          <div class="authorBox">
            <p class="authorName" @click="$router.push('/author?userId='+DetailData.userId)" >{{DetailData.userName}}</p>
            <p class="authorIntroduce">
              {{DetailData.profile}}
              <span>展开 ></span>
            </p>
          </div>
        </div>
      </div>
      <!------------------------------------------------------评价------------------------------------------------------------------>
      <!-- <div class="evaluation">
        <van-cell title="评价(112)" is-link value="查看全部" to="/comments"/>

        <van-skeleton title avatar :row="2" :loading="evaluationLoading">
          <div class="container">

            <div class="evaluationBox">
              <div class="evaluationHeader">

                <van-image round src="https://img.yzcdn.cn/vant/cat.jpeg"/>

                <div class="HeaderTitle">
                  <p class="Name">李**1</p>
                  <p class="Time">2019-09-03</p>
                </div>
              </div>
              <div class="textContent">
                竟然是真迹现场画的，那么便宜买手工的，我以为是复印的那种。
                竟然是真迹现场画的，那么便宜买手工的，我以为是复印的竟是
                真迹现场画的，那么便宜买手工的，我以为是复印的那种。那种。
                竟然是真迹现场画的，那么便宜买手工的，我以为是复印的、那
                种。竟然是真迹现场画的，那么便宜买手工的，我以为是复印的
                竟然是真迹现场画的，那么便宜买手工的，我以为是复印的那种。
                那种。
              </div>
            </div>
          </div>
        </van-skeleton>

      </div> -->
      <!------------------------------------------------------专家评价------------------------------------------------------------------>
      <div class="reviewBox">
        <van-cell title="专家点评" is-link value="查看全部" :to="('/comments?id='+Id)"/>
        <!-- 骨架 -->
        <van-skeleton title avatar :row="2" :loading="evaluationLoading">
          <div class="container">
            <!-- 内容盒子 -->
            <div class="evaluationBox" v-for="item in review" :key="item.userId">
              <div class="evaluationHeader van-row">
                <!-- 头像 -->
                <van-image round :src="item.icon" class="van-col--4">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
                <van-icon name="diamond" class="IconEvaluation" />
                <!-- 名称，时间 -->
                <div class="HeaderTitle van-col--14">
                  <p class="Name">{{item.userName}}</p>
                  <p class="Time">{{item.createTime}}</p>
                </div>
                <div class="likeCount van-col--6">
                  <van-icon name="like-o" />{{item.likeCount}}
                </div>
              </div>
              <div class="textContent">
                {{item.content}}
              </div>
            </div>
          </div>
        </van-skeleton>
      </div>
      <!------------------------------------------------------作品详情------------------------------------------------------------------>
      <div class="parameter">
        <van-cell title="作品信息" value />
        <van-row class="container">
          <van-col span="24"  v-for="(item,index) in Param" :key="index">
            <van-col span="8">{{index}}：</van-col>
            <van-col span="16">{{item}}</van-col>
          </van-col>
        </van-row>
      </div>
       <!-- 细节内容 -->
      <!-- <div class="pictures">
        <van-cell title="作品细节" value />

        <div class="picturesBox">
          <van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>
      </div> -->
    </van-pull-refresh>
    <!-- 底部购买 -->
    <!-- <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      :message-config="messageConfig"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    /> -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="咨询" @click="$toast('功能开发中')"/>
      <van-goods-action-icon icon="cart-o" text="购物车" info="5"  @click="$toast('功能开发中')"/>
      <!-- <van-goods-action-button color="#D7B782" type="warning" text="加入购物车" /> -->
      <van-goods-action-button color="#B19260" type="danger" text="立即购买" @click="$router.push('./sureorder?id='+Id)"/>
    </van-goods-action>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
import { getShopDetail, usercomments } from '@/api/api'
export default {
  name: 'goods',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '产品详情',
      evaluationLoading: false,
      count: 0,
      MainLoading: false,
      Id: this.$route.query.id,
      DetailData: [],
      Param: [],
      review: []
    }
  },

  computed: {},

  watch: {},

  created () {
    var data = { 'commodityId': this.Id }
    var review = { 'pageSize': 1, 'commodityId': this.Id }
    this.GetJson(data, review)
  },

  mounted () {},

  destroyed () {},

  methods: {
    // 列表数据请求
    GetJson (data, review) {
      getShopDetail(this.$qs.stringify(data))
        .then(res => {
          console.log(res.data.data)
          this.DetailData = res.data.data.info
          this.Param = res.data.data.param
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
      usercomments(this.$qs.stringify(review))
        .then(res => {
          console.log(res.data.data)
          this.review = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        // this.$toast('刷新成功')
        var data = { 'commodityId': this.Id }
        var review = { 'pageSize': 1, 'commodityId': this.Id }
        this.GetJson(data, review)
        this.MainLoading = false
        this.count++
      }, 500)
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
   margin: 0 15px;
}
.Goods {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px - 45px);
    overflow-y: auto;
    .GoodsHeader {
      background-color: #ffffff;
      .HeaderBox {
        .van-cell {
          .van-cell__title {
            span {
              font-weight: bold;
            }
          }
          .van-panel__header-value {
            color: #d7b782;
            font-weight: bold;
          }
        }
      }
      p {
        margin: 0;
      }
      .van-hairline--top-bottom::after {
        border: none;
      }

      .van-cell::after {
        left: 0;
      }

      .authorBox {
        margin-top: 21px;
        padding-bottom: 20px;
        .authorName {
          font-weight: bold;
          font-size: 14px;
          color: #333333;
        }
        .authorIntroduce {
          font-size: 12px;
          color: #666666;
          text-indent: 24px;
          span {
            color: #d7b782;
            font-weight: bold;
          }
        }
      }
    }
    .evaluation,
    .reviewBox {
      margin-top: 10px;
      background-color: #ffffff;
      .van-cell::after {
        left: 0;
      }
      .evaluationBox {
        padding-top: 10px;
        padding-bottom: 10px;
        .evaluationHeader {
          position: relative;
          .van-image {
            width: 30px;
            height: 30px;
          }
          .IconEvaluation{
            position: absolute;
            color: #d7b782;
            font-size: 18px;
            left: 16px;
            top:22px;
          }
          .HeaderTitle {
            display: inline-block;
            margin-left: 10px;
            p {
              margin: 0;
            }
            .Name {
              font-size: 14px;
              color: #333333;
            }
            .Time {
              font-size: 11px;
              color: #999999;
            }
          }
          .likeCount{
            display: inline-block;
            text-align: right;
            font-size: 12px;
            color: #666666;
          }
        }

        .textContent {
          font-size: 12px;
          color: #999999;
          text-indent: 24px;
        }
      }
      .van-skeleton {
        padding-top: 10px;
        padding-bottom: 15px;
      }
      .van-cell {
        .van-cell__title {
          font-weight: bold;
        }
        .van-cell__value {
          color: #d7b782;
        }
        .van-icon {
          color: #d7b782;
        }
      }
    }
    .parameter,
    .pictures {
      margin-top: 10px;
      background-color: #ffffff;
      .van-cell::after {
        left: 0;
      }
      .van-cell {
        .van-cell__title {
          font-weight: bold;
        }
      }
      .picturesBox {
        padding: 10px 0;
      }
      .van-row {
        font-size: 12px;
        line-height: 24px;
        color: #666666;
        margin-top: 10px;
        padding-bottom: 10px;
      }
    }
  }
}
</style>
